import PropTypes from 'prop-types'
import { Button, Icon, Table, Divider } from 'antd'
import { classnames } from 'utils'

import styles from './List.less'

const YQList = ({
  loading, rowKey, dataSource,
}) => {
  // 表格配置
  const columns = [{
    title: '功能名称',
    dataIndex: 'function_name',
  }, {
    title: '当前版本',
    dataIndex: 'version_id',
  }, {
    title: '功能状态',
    dataIndex: 'function_status',
    render: (text) => {
      return (
        <div className={classnames({ [styles.start]: text === 'enable', [styles.stop]: text === 'disable' })}>
          <Icon type="poweroff" /> { text === 'enable'? "启用" : text === 'disable'? "停止": "" }
        </div>
      )
    },
  }, {
    title: '接口总数',
    dataIndex: 'interface_total',
    render: (text) => {
      return <span>{text}个</span>
    },
  }, {
    title: '操作',
    render: (record) => {
      const status = record.function_status
      return (
        <div className={styles.operation}>
          <a href="javascript:;">{ status === 'enable'? "停止" : status === 'disable'? "启用": "" }</a>
          <Divider type="vertical" style={{ background: "#ddd" }} />
          <a href="javascript:;">查看接口</a>
        </div>
      )
    },
  }]

	return (
		<div className={styles.listWrap}>
			<div className={styles.title}>
        <div>产品功能</div>
        <div className={styles.buttons}>
          <Button type="primary">创建功能</Button>
        </div>
      </div>
      <Table 
        loading={loading}  
        columns={columns}  
        dataSource={dataSource} 
        rowKey={rowKey}  
        pagination={false}
      /> 
		</div>
	)
}

YQList.propTypes = {
  loading: PropTypes.bool,
	dataSource: PropTypes.array,  
	rowKey: PropTypes.string,
}

export default YQList